<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> 总览
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-card class="box-card">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="0">当天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item> </el-menu
            ><br />
            <el-card class="box-card2">
                <div class="text item">
                    <h1>{{order_total}}</h1>
                    <br />
                    <span>总运单数</span>
                    <br /><br /><br />
                    <el-button type="primary" round @click=handleEdit>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>1</h1>
                    <br />
                    <span>总设备数</span>
                    <br /><br /><br />
                    <el-button type="primary" round @click=handleEdit>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{zaitu}}</h1>
                    <br />
                    <span>在途运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round @click=handleEdit>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>0</h1>
                    <br />
                    <span>报警运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round @click=handleEdit>立刻查看</el-button>
                </div>
            </el-card>
        </el-card>
        </div>
    </div>
</template>


<script>
import { getorder_id,gettotal } from '../../api/api';
export default {
    name:'zonglan',
    data() {
        return {
            activeIndex: '0',
            order_total:'0',
            zaitu:'0',
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            this.activeIndex = key;
            gettotal({days: this.activeIndex }).then(res => {
                this.order_total = res.num
                this.zaitu = res.zaitu
                // console.log(res);
            });
        },
        handleEdit(){
            this.$router.push({path:'showorder'})
        },
        
    },

    mounted: function() {
        
    }
};
</script>

<style>
.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 25%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 25%;
    height: 250px;
    float: left;
}
.box-card2 {
    width: 24%;
    height: 250px;
    float: left;
}
</style>